<template>
    <div>
        <el-container>
            <el-header>
                <div style="text-align: left">
                    <el-form :inline="true" :model="query" class="query-form" size="mini">
                        <el-form-item class="query-form-item">
                            <el-input  placeholder="品牌名称"></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-select  placeholder="选择品牌">
                                <el-option label="华为" value=""></el-option>
                                <el-option label="苹果" value="0"></el-option>
                                <el-option label="小米" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-select  placeholder="状态">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="禁用" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button-group>
                                <el-button type="danger" plain icon="el-icon-refresh" ></el-button>
                                <el-button type="danger" plain icon="search" >查询</el-button>
                                
                            </el-button-group>
                        </el-form-item>
                    </el-form>
                    
                    
                </div>
            </el-header>
            <el-main>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="code"
                        label="品牌编号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="品牌logo"
                        width="220"
                        >
                        <template>
                            <el-image
                                style="width: 100px; height: 100px"
                                :src="url"
                                :fit="fit"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="品牌名称"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        
                        label="品牌销售金额">
                    </el-table-column>
                    
                </el-table>
            </el-main>
            <el-footer>
                 <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            currentPage: 1,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            tableData: [
                {
                    code: '001001',
                    name: '华为',
                    price: '498800.00',
                },
                {
                    code: '001002',
                    name: '苹果',
                    price: '678900.00',
                }, 
                {
                    code: '001003',
                    name: '小米',
                    price: '3989900.00',
                }
            ]
        }
    },
    methods: {
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
